<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>资金队列</span>
      </div>
      <div class="funds-box">
        <el-tabs
          type="border-card"
          style="margin-top: 15px"
          @tab-click="onTabsClick"
        >
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            :label="item"
          >
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{ background: '#e1e4e5' }"
            >
              <el-table-column prop="username" label="用户名" width="100">
              </el-table-column>
              <el-table-column
                prop="InvestRecordNum"
                label="投资编号"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="productName" label="投资产品" width="150">
              </el-table-column>
              <el-table-column prop="investDate" label="投资时间">
              </el-table-column>
              <el-table-column prop="period" label="投资天数">
              </el-table-column>
              <el-table-column prop="notMatchedMoney" label="待匹配金额">
              </el-table-column>
              <el-table-column
                prop="matchStatus"
                :formatter="stateFormat"
                label="匹配状态"
              >
              </el-table-column>
            </el-table>
            <div class="bottom-box">
              <el-pagination
                style="margin-top: 10px"
                background
                @current-change="onPageChange"
                layout="prev, pager, next"
                :page-count="filterData.totalPages"
                :current-page="filterData.curPage"
                :page-size="filterData.perPage"
              >
              </el-pagination>
              <el-button v-if="!filterData.type" :disabled="!tableData.length" type="success" @click="startMatch">匹配债权</el-button>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 分页数据
      filterData: {
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
        // 审批状态
        type: 0,
      },
      tabsList: ["待匹配", "已匹配"],
      // 日期的数据
      dateRange: "",
      // 未审批的数据
      tableData: [],
    };
  },
  methods: {
    ...mapActions({
      getFunds: "transaction/getFunds",
      matchup: "transaction/matchup",
    }),
    getfundsList() {
      // 请求成功的话就返回响应对象
      this.getFunds(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages;
      });
    },
    // 格式化匹配状态
    stateFormat(row) {
      // console.log(row);
      if (row.matchStatus == 0) {
        return "未匹配";
      } else if (row.matchStatus == 1) {
        return "部分匹配";
      } else if (row.matchStatus == 2) {
        return "已匹配";
      }
    },
    // 当前页数发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getfundsList();
    },
    // tabl被选中时触发
    onTabsClick(data) {
      console.log("当table被点击时", data);
      // parseInt转化成int类型
      this.filterData.type = parseInt(data.index);
      this.filterData.curPage = 1;
      this.getfundsList();
    },
    // 匹配按钮（开始匹配债权）
    startMatch(){
      this.matchup().then(res =>{
        this.$message({
          message: '匹配成功',
          type: 'success'
        });        
        this.getfundsList();
      })
    },
  },
  // 页面创建好的时候调用他
  created() {
    this.getfundsList();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .box-card {
    .funds-box {
      .bottom-box {
        display: flex;
        // 布局方式：两端对齐
        justify-content: space-between;
        margin-right: 5px;
        margin-top: 5px;
      }
    }
  }
}
</style>
  